
<template>
  <div class="pb-2">
    <div class="box">
      <div class="admin-teacher-header d-flex justify-content-between  align-items-center fixed-top text-center">
        <div style="width:100px">名称</div>
        <div>当前徒弟</div>
        <div>累计徒弟</div>
        <div>累计评价</div>
        <div>地区</div>
      </div>
      <div class="admin-teacher-body">
        <div v-for="(item,i) in dataList" :key="i" class="admin-teacher-item d-flex justify-content-between align-items-center" @click="onClick(item)">
          <div class="d-flex align-items-center">
            <img class="small-avatar mr-1" :src="item.avatar | avatarUrl" />
            <span>{{item.name}}</span>
          </div>
          <div>{{item.currentNum}}</div>
          <div>{{item.totalNum}}</div>
          <div class="d-flex align-items-center">
            <img style="width:14px;height:16px" class="mr-1" :src="'xiaoxingxing.png'|imgUrl" />
            <span>{{item.rating}}</span>
          </div>
          <div>
            {{item.area}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'

@Component
export default class TeacherAdmin extends Vue {
  @Action getTeacherAdmin;

  public get dataList () {
    return (
      this.$store.state.admin.teachers && this.$store.state.admin.teachers.items
    )
  }
  public async created () {
    if (this.dataList === null) {
      await this.getTeacherAdmin()
    }
  }
  public async onShow () {}

  public onClick (item) {
    Megalo.navigateTo({ url: '/admin/pages/teacher-admin/content?id=' + item.id + '&name=' + item.name })
  }
}
</script>

<style lang="stylus" scoped>
.admin-teacher-header {
  top: $adminHeaderHeight;
  background: #F7F7F7;
  height: $admin-current-header-height;
  margin: 0 10px;
  border-radius: 8px;
  padding: 0 10px !important;
}

.admin-teacher-body {
  padding-top: $admin-current-header-height;

  .admin-teacher-item {
    padding: 10px 5px 10px 0 ;
    border-bottom: 1px solid #f7f7f7;
  }

   .admin-teacher-item >._div:first-child{
      width:100px
   }

  .admin-teacher-item:nth-last-child(0) {
    border-bottom: none;
  }
}

.box {
  padding: 0 5px 0 10px;
}
</style>
